import AppleItem from "./AppleItem";
import { observer } from "mobx-react-lite";

function Apple({ store }) {
  const {
    filterAppleByEat,
    filterNotEatedApple,
    eatApple,
    pickApple,
    loading,
  } = store;
  const { isEatedAppleNum, isEatedAppleWight } = filterAppleByEat;
  const { notEatedAppleList, notEatedAppleNum, notEatedAppleWight } =
    filterNotEatedApple;
  console.log(store);

  return (
    <div className="app">
      <div className="appleBusket">
        <div className="title">苹果篮子</div>
        <div className="stats">
          <div className="section">
            <div className="head">当前</div>
            <div className="content">
              {notEatedAppleNum}个苹果，{notEatedAppleWight}克
            </div>
          </div>
          <div className="section">
            <div className="head">已吃掉</div>
            <div className="content">
              {isEatedAppleNum}个苹果，{isEatedAppleWight}克
            </div>
          </div>
        </div>
        <div className="appleList">
          {notEatedAppleList.map((item) => (
            <AppleItem key={item.id} apple={item} eatApple={eatApple} />
          ))}
        </div>
        <div className="btn-div">
          <button className={loading ? "disabled" : ""} onClick={pickApple}>
            {loading ? "正在采摘..." : "摘苹果"}
          </button>
        </div>
      </div>
    </div>
  );
}

export default observer(Apple);
